<template>
  <div class="container">
    <HfSuperForm v-bind="searchFormProps" ref="searchFormRef" v-on="searchFormEmits" />
    <HfSuperForm v-bind="diologFormProps" ref="diologFormRef" v-on="diologFormEmits"> </HfSuperForm>
    <HfTable v-bind="tableProps" ref="tableRef" v-on="tableEmits"> </HfTable>
  </div>
</template>
<script setup lang="ts">
import { userStatusValues } from "@/assets/constants/enumContants";
import { pageEmit } from "@/components/HfSuperForm/super-form";
const route = useRoute();
const searchFormRef = ref<ISusEx>();
let searchFormProps = ref<ISusP>({
  formType: "searchForm",
  formOpt: {
    items: {
      userName: { type: "input", label: "用户名" }
    }
  }
});
const searchFormEmits: ISusE = {
  emitToOpen: () => pageEmit.emitToOpen({ dioRef: diologFormRef }),
  emitGetListFn: ({ fn }) => pageEmit.emitGetListFn({ tableRef, fn, isPageToOne: true, searchFormRef }),
  emitChangeProps: (objd: ISuECommonChangePropsEmitArgue) => pageEmit.emitChangeProps(objd, searchFormProps.value)
};
const diologFormRef = ref<ISudEx>();
let diologFormProps = ref<ISudP>({
  formType: "diologForm",
  formOpt: {
    saveUrl: "/user",
    items: {
      userName: { type: "input", label: "用户名", hasrules: true },
      password: { type: "input", label: "密码", hasrules: true },
      avatar: { type: "date", label: "头像", hasrules: true },
      roleId: { type: "select", label: "角色", hasrules: true ,url:'/role/list'},
      status: { type: "radio", label: "状态", values: userStatusValues, hasrules: true }
    }
  },
  superFormOpt: { title: "编辑个人信息" }
});
const diologFormEmits: ISudE = {
  emitGetListFn: ({ fn }) => pageEmit.emitGetListFn({ tableRef: tableRef, fn, searchFormRef }),
  emitChangeProps: (objd: ISuECommonChangePropsEmitArgue) => pageEmit.emitChangeProps(objd, diologFormProps.value)
};
const tableRef = ref<ITableEx>();
let tableProps: ITableP = {
  tableOpt: {
    list: { url: "/user", params: { qsGroupId: Number(route.params.id) } },
    delete:{url:'/user'},
    columns: [
      { label: "ID", prop: "id" },
      { label: "用户名", prop: "userName" },
      { label: "头像", prop: "avatar" },
      { label: "角色", prop: "roleName" },
      { label: "状态", prop: "status" },
      { label: "创建时间", prop: "createTime", render: "timeStamp" }
    ]
  }
};
const tableEmits: ITableE = {
  emitToOpen: ({ row }: any) => pageEmit.emitToOpen({ dioRef: diologFormRef, row })
};
</script>
